<template>
	<view class="app" style="--main:#FF755D">
		<!-- 页面内容开始 -->
		<!-- 轮播 -->
		<view class="header">
			<view class="header-main">
				<u-avatar :src="vk.getVuex('$user.userInfo.avatar')" mode="circle" size="90"></u-avatar>
				<view class="user-info">
					<view class="user-name">{{ vk.getVuex("$user.userInfo.real_name","") }}</view>
					<view class="user-invite-code">
						<text>我的邀请码：</text>
						<text>{{ vk.getVuex("$user.userInfo.my_invite_code","") }}</text>
						<text style="margin-left: 10rpx;text-decoration:underline;" @click="copyText(vk.getVuex('$user.userInfo.my_invite_code'))">复制</text>
					</view>
					<!-- <view class="user-fx-lv">分销等级：{{ fxLvCom }}</view> -->
				</view>
				<view class="header-share">
					<view class="header-share-btn" @click="shareBtn()">
						<u-icon name="zhuanfa" color="#FFFFFF" size="28" margin-left="10" label="我要推广" label-color="#FFFFFF"></u-icon>
					</view>
				</view>
				<vk-mall-share-qrcode
					ref="shareQrcode"
					v-model="data.share.show"
					:banner="data.share.banner || 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-770849e2-e156-422a-a1d1-4f32ac4ec55e/900609ad-f9e0-4b2f-a6dd-cd9fc47f4b6f.jpg'"
					:qrcode="data.share.qrcode"
					price-txt="22"
					:avatar="data.share.avatar"
					view-details="长按或扫描识别二维码"
					:title="data.share.title"
					:show="false"
				></vk-mall-share-qrcode>
				<!-- #ifndef MP-WEIXIN -->
				<view style="position: absolute;top:-1000rpx" v-if="data.share.url">
					<vk-data-qrcode @result="qrcodeResult" :text="data.share.url" :size="500"></vk-data-qrcode>
				</view>
				<!-- #endif -->
			</view>
		</view>


		<view class="vip-card" @click="pageTo('./fx-lv')">
			<view class="vip-card-flex">
				<view class="vip-text">
					<text>{{ fxLvCom }}</text>
				</view>
				<view class="vip-text">查看升级进度</view>
			</view>
		</view>

		<view class="padding1015" style="padding-top: 0;">
			<!-- 业务数据 -->
			<view class="card-view data-view">
				<view class="grid-title-view">业务数据</view>
				<u-grid :col="2" :border="false" hover-class="none">
					<u-grid-item @click="pageTo('./user-list/user-list?time=1')">
						<u-count-to :loading="!complete" bold :start-val="0" :end-val="$getData(data, 'stats.todayUser', 0)" :duration="1000" font-size="40"></u-count-to>
						<view class="grid-text">
							<text>今日推广用户</text><u-icon name="arrow-right" color="#8c8c8c"></u-icon>
						</view>
					</u-grid-item>
					<u-grid-item @click="pageTo('./salesman-order?time=1')">
						<u-count-to :loading="!complete" bold :decimals="2" :start-val="0" :end-val="vk.pubfn.priceFilter($getData(data, 'stats.todayOrderAmount', 0))" :duration="1000" font-size="40"></u-count-to>
						<view class="grid-text">
							<text>今日订单金额</text><u-icon name="arrow-right" color="#8c8c8c"></u-icon>
						</view>
					</u-grid-item>
					<u-grid-item @click="pageTo('./user-list/user-list')">
						<u-count-to :loading="!complete" bold :start-val="0" :end-val="$getData(data, 'stats.shareUserNumAll', 0)" :duration="1000" font-size="40"></u-count-to>
						<view class="grid-text">
							<text>累计用户数量</text><u-icon name="arrow-right" color="#8c8c8c"></u-icon>
						</view>
					</u-grid-item>
					<u-grid-item @click="pageTo('./salesman-order')">
						<u-count-to :loading="!complete" bold :start-val="0" :end-val="$getData(data, 'stats.totalOrder', 0)" :duration="1000" font-size="40"></u-count-to>
						<view class="grid-text">
							<text>累计订单数量</text><u-icon name="arrow-right" color="#8c8c8c"></u-icon>
						</view>
					</u-grid-item>
				</u-grid>
			</view>

			<view style="margin-top: 30rpx;" v-if="data.noticeList && data.noticeList.length > 0">
				<u-notice-bar mode="vertical" :list="data.noticeList" :is-circular="false" duration="3000" @click="noticeClick"></u-notice-bar>
			</view>
			<!-- 奖励数据 -->
			<view class="card-view" style="padding-bottom: 0;">
				<view class="grid-title-view">奖励数据</view>
				<u-grid :col="2" :border="false">
					<u-grid-item @click="pageTo('./salesman-account-record?is_freeze=true')">
						<u-count-to :loading="!complete" bold	:decimals="2"	:start-val="0" :end-val="vk.pubfn.priceFilter(vk.getVuex('$user.userInfo.account_reward.wait'))" :duration="1000" font-size="34" ></u-count-to>
						<view class="grid-text">在途奖励</view>
					</u-grid-item>
					<u-grid-item @click="pageTo('./salesman-account-record')">
						<u-count-to :loading="!complete" bold :decimals="2" :start-val="0" :end-val="vk.pubfn.priceFilter(vk.getVuex('$user.userInfo.account_reward.total'))" :duration="1000" font-size="34" ></u-count-to>
						<view class="grid-text">累计奖励</view>
					</u-grid-item>
					<u-cell-item
						@click="pageTo('./withdrawal/apply')"
						icon="red-packet-fill"
						title="可提现金额"
						:border-top="true"
						:border-bottom="false"
						:value="complete ? vk.pubfn.priceFilter(vk.getVuex('$user.userInfo.account_reward.allow')) : '-'"
						:value-style="{
							color: 'var(--main)',
							'font-size': '32rpx',
							'font-weight': 550
						}"
						:center="true"
						:icon-style="{
							color: 'var(--main)'
						}"
					></u-cell-item>
				</u-grid>
			</view>

			<!-- 我的应用 -->
			<view class="card-view grid-btn-view">
				<view class="grid-title-view">我的应用</view>
				<u-grid :col="grid_1.colNum" :border="false" class="grid-view">
					<u-grid-item @click="clickGridItem(item)" v-for="(item, index) in grid_1.list" :key="index" v-if="!item.showRule || item.showRule()">
						<view class="iconBorder" :style="'background-color: ' + item.backgroundColor + ';'">
							<view class="inViewCenter"><u-icon :name="item.icon" :size="grid_1.iconSize" :color="item.color"></u-icon></view>
						</view>
						<view class="grid-text">{{ item.title }}</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>

		<view style="height: 100rpx;display: block;"></view>
		<view class="start-share" @click="shareBtn()"><u-icon name="zhuanfa" color="#FFFFFF" size="28" margin-left="10" label="开始推广" label-color="#FFFFFF"></u-icon></view>

		<!-- 页面内容结束 -->

		<u-modal
			v-model="modal.show"
			:confirm-text="modal.confirmText"
			:cancel-text="modal.cancelText"
			:show-cancel-button="modal.showCancelTutton"
			@confirm="modal.show = false;"
			@cancel="modal.show = false;"
			>
			<view style="padding: 40rpx 80rpx;">
				<view>恭喜您共解锁：</view>
				<view>在途奖励：￥<text class="text-red">{{ unlockData.unlockReward }}</text> 元</view>
			</view>
		</u-modal>

		<!-- 分享选择弹窗 -->
		<u-popup v-model="sharePopup.show" mode="bottom" height="160">
			<u-grid :col="4" :border="false">
				<u-grid-item @click="shareCard()">
					<button plain style="border: 0;line-height: 1;" open-type="share">
						<u-icon name="weixin-fill" :size="46" color="#19be6b"></u-icon>
						<view class="grid-text">邀请好友</view>
					</button>
				</u-grid-item>
				<u-grid-item @click="shareImage()">
					<u-icon name="moments-circel-fill" :size="46" color="#19be6b"></u-icon>
					<view class="grid-text">海报形式</view>
				</u-grid-item>
				<!-- #ifdef H5 || APP-PLUS || MP-WEIXIN -->
				<u-grid-item @click="shareLink()">
					<u-icon name="moments-circel-fill" :size="46" color="#19be6b"></u-icon>
					<view class="grid-text">链接形式</view>
				</u-grid-item>
				<!-- #endif -->
			</u-grid>
		</u-popup>
		<!-- 链接分享弹窗 -->
		<u-popup v-model="shareLinkPopup.show" mode="bottom" height="650" closeable>
			<view class="share-link-popup">
				<view class="popup-title">链接分享</view>
				<view class="item-title">url链接</view>
				<view class="item-value">{{ shareLinkPopup.url }}</view>
				<view class="item-button">
					<u-button :custom-style="{fontWeight: 'bold',color:'#000000'}" @click="copyText(shareLinkPopup.url)">复制链接</u-button>
				</view>
				<view class="popup-tips">
					<view>. 将链接发送给你要邀请的好友，好友点开链接确认接收邀请，则邀请成功！</view>
					<view>. 如果你有自己的公众号，你也可以将链接设置为你的公众号菜单，则用户通过你公众号菜单也会进入你的邀请页面。</view>
				</view>
			</view>
		</u-popup>

		<!-- #ifdef H5 -->
		<vk-mall-h5-share ref="h5Share"></vk-mall-h5-share>
		<!-- #endif -->

		<!-- 全局公共浮球导航模块 -->
		<vk-data-float-ball :scroll-top="scrollTop"></vk-data-float-ball>
		<vk-data-loading v-model="loading"></vk-data-loading>
	</view>
</template>

<script>
var vk = uni.vk;			// vk依赖
export default {
	data() {
		// 页面数据变量
		return {
			modal:{
				show:false,
				showCancelTutton:false,
				confirmText: "好的",
				cancelText: "先攒着后面一起提"
			},
			unlockData:{}, // 奖励解锁数据
			loading: false,
			complete: false,
			scrollTop: 0,
			// init请求返回的数据
			data: {
				userInfo:{}, // 用户信息
				noticeList: [], // 公告列表
				mchInfo:{}, // 商家信息
				share:{}, // 分享信息
			},
			// 表单请求数据
			form1: {},
			grid_1: {
				colNum: 4,
				iconSize: 38,
				list: [
					{ title: "进入商城", backgroundColor: "#ecf5fe", color: "#4e92f6", icon: "home",
						click:()=>{
							vk.navigateToHome();
						}
					},
					{ title: "推广商品", page: "./goods-list", backgroundColor: "#fdf3e9", color: "#f3b748", icon: "vk-icon-goods_light" },
					{ title: "我的信息", page: "./update-user-info", backgroundColor: "#f3ecfd", color: "#894bf3", icon: "vk-icon-friend_settings_light" },
					{ title: "我的钱包", page: "./salesman-account", backgroundColor: "#ecf5fe", color: "#4e92f6", icon: "vk-icon-moneybag" },
					{ title: "我的粉丝", page:"./user-list/user-list", backgroundColor: "#fceded", color: "#e95d58", icon: "vk-icon-friend_light" },
					{ title: "业绩中心", page:"./performance-center/detail", backgroundColor: "#f3ecfd", color: "#884af2", icon: "vk-icon-ye" },
					{ title: "联系客服", page: "/pages/service-center/service-center", backgroundColor: "#fceded", color: "#ea5e58", icon: "server-man" },
					{ title: "区域代理", page: "./regional-agent", backgroundColor: "#ecf5fe", color: "#4e92f6", icon: "vk-icon-quyuguanli",
						showRule: () => {
							let fxRole = vk.getVuex('$user.userInfo.fx.role') || [];
							return fxRole.indexOf("region") > -1 ? true : false;
						}
					},
				]
			},
			sharePopup:{
				show: false
			},
			shareLinkPopup:{
				show: false,
				url:""
			},
		};
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	// 监听 - 下拉
	onPullDownRefresh() {
		this.init();
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	// 监听 - 页面每次【加载时】执行(如：前进)
	onLoad(options = {}) {
		vk = uni.vk;
		this.options = options;
		this.init(this.options);
	},
	// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
	onReady() {},
	// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
	onShow() {},
	// 监听 - 页面每次【隐藏时】执行(如：返回)
	onHide() {},
	// 监听 - 点击右上角转发时
	onShareAppMessage(options) {
		return vk.myfn.onShareAppMessage({
			options,
			path: "/pages/index/index"
		});
	},
	// 函数
	methods: {
		// 页面数据初始化函数
		init(options) {
			let that = this;
			vk.callFunction({
				url: "client/salesman.getSalesmanCenter",
				//title:"请求中...",
				loading: !that.complete,
				data: {},
				success: data => {
					vk.pubfn.objectAssign(that.data, data);
					that.complete = true;
					if (data.unlockRewardCount){
						that.unlockRewardMoney();
					}
					// 分销等级自动升级检测
					vk.callFunction({
						url: 'client/salesman.autoUpgradeLv',
						data: {},
						success: (data) => {
							if (data.isUpgrade) {
								vk.alert(data.msg, "恭喜");
							}
						}
					});
				},
				fail: data => {
					if (data.code == -2) {
						// 跳转到申请分销员页面
						vk.redirectTo("../apply-salesman/apply-salesman");
					} else {
						vk.alert(data.msg);
					}
				}
			});
		},
		pageTo(path) {
			vk.navigateTo(path);
		},
		unlockRewardMoney(){
			let that = this;
			vk.callFunction({
				url: 'client/salesman.unlockReward',
				title:'奖励解锁中...',
				data:{

				},
				success:function(data){
					if (data.unlockReward) {
						that.modal.show = true;
						that.unlockData = data;
						if (data.userInfo){
							that.data.userInfo = data.userInfo;
						}
						that.data.mchInfo = data.mchInfo;
						that.unlockData.ktx = vk.pubfn.priceFilter(vk.pubfn.getData(data.userInfo,'account_reward.allow'));
						if (that.unlockData.ktx) {
							that.modal.confirmText = "好的";
							//that.modal.showCancelTutton = true;
						} else {
							that.modal.confirmText = "好的";
							that.modal.showCancelTutton = false;
						}
					}
				}
			});
		},
		// 卡片形式分享
		shareCard(){
			// #ifdef APP-PLUS
			vk.myfn.appShare({
				provider: "weixin",
				scene: "WXSceneSession",
				type: 5, // 0:h5 5:小程序
				pagePath: `/pages/index/index`
			});
			// #endif
			// #ifdef H5
			this.$refs.h5Share.show();
			// #endif
			this.sharePopup.show = false;
		},
		// 海报形式分享
		shareImage(){
			this.sharePopup.show = false;
			let useMP = false;
			// #ifdef MP-WEIXIN || MP-ALIPAY
			useMP = true;
			// #endif
			if (useMP) {
				this.shareMPcode();
			} else {
				this.shareH5code();
			}
		},
		// 链接形式分享
		shareLink(){
			let that = this;
			that.sharePopup.show = false;
			let my_invite_code = vk.getVuex("$user.userInfo.my_invite_code");
			let useMP = false;
			// #ifdef MP-WEIXIN
			useMP = true;
			// #endif
			if (useMP) {
				vk.userCenter.getWeixinMPscheme({
					data: {
						path: "pages/index/index",
						query: `inviteCode=${my_invite_code}`,
						env_version: vk.getConfig().debug ? "develop" : "release", // 默认值"release"。要打开的小程序版本。正式版为 "release"，体验版为"trial"，开发版为"develop"，仅在微信外打开时生效。
					},
					success:(data) =>{
						let copyData = data.openlink;
						that.shareLinkPopup.show = true;
						that.shareLinkPopup.url = copyData;
						uni.setClipboardData({
							data: copyData,
							success: function () {
								vk.toast("链接已复制，请直接粘贴发送给好友！");
							}
						});
					}
				});
			} else {
				let url = `/pages/index/index?inviteCode=${my_invite_code}`;
				let rootPath = vk.myfn.salesman.getH5RootPath();
				if (!rootPath) {
					vk.toast("商家未设置h5域名");
					return false;
				}
				let copyData = rootPath + url;
				that.shareLinkPopup.show = true;
				that.shareLinkPopup.url = copyData;
				uni.setClipboardData({
					data: copyData,
					success: function () {
						vk.toast("链接已复制，请直接粘贴发送给好友！");
					}
				});
			}
		},
		shareMPcode(){
			let that = this;

			// that.data.share.avatar = "https://thirdwx.qlogo.cn/mmopen/vi_32/Itovj2QY4UPNnI9Iagn2wpI548AMaOF5X2PmrF1HshI3SC6kK89TicuiadrFuvPicIQHqgVEps2MEYaEhOUHbgVicw/132";
			// that.data.share.qrcode = "https://imgnew.zhichikeji.com/tmp_file/78aa088446aac20d96875e74f61a6ee51.png"
			// that.data.share.title = "VK";
			// that.data.share.show = true;
			// return false;

			let userInfo = vk.getVuex("$user.userInfo");
			let { my_invite_code, avatar, nickname } = userInfo;
			if (!my_invite_code) {
				vk.toast("您暂无推广权限");
				return false;
			}
			let scene = `1:${my_invite_code}`;

			vk.callFunction({
				url: 'client/salesman.getGenerateQRCode',
				title: '生成中...',
				data: {
					page: "pages/index/index",
					scene,
					check_path: false,
					env_version: vk.getConfig().debug ? "develop" : "release", // 要打开的小程序版本。正式版为 "release"，体验版为 "trial"，开发版为 "develop"。默认是正式版。
				},
				success:function(data){
					that.data.share.qrcode = data.base64;
					that.data.share.show = true;
					if (vk.pubfn.isNotNull(data.tmplIds)) {
						vk.pubfn.requestSubscribeMessage({
							tmplIds: data.tmplIds
						});
					}
				}
			});
		},
		qrcodeResult(qrcode){
			let that = this;
			that.data.share.qrcode = qrcode;
			that.data.share.show = true;
		},
		shareH5code(){
			let that = this;
			let my_invite_code = vk.getVuex("$user.userInfo.my_invite_code");
			let url = `/pages/index/index?inviteCode=${my_invite_code}`;
			let rootPath = vk.myfn.salesman.getH5RootPath();
			let shareLink = rootPath + url;
			that.data.share.url = shareLink;
			if (that.data.share.qrcode) that.data.share.show = true;
		},
		shareBtn() {
			this.sharePopup.show = true;
		},
		clickGridItem(item) {
			let that = this;
			if (!that.complete) {
				return false;
			}
			if (item.page) {
				if (item.isMP){
					let env = vk.h5.getEnv();
					if (env == "mp-weixin") {
						// 跳转
						vk.h5.wx.miniProgram.reLaunch({ url: item.page});
					} else {
						vk.toast("请在小程序中打开!");
					}
				}else{
					vk.navigateTo(item.page);
				}
			} else if(typeof item.click === "function"){
				item.click();
			}else {
				vk.alert(item.title);
			}
		},
		noticeClick(index) {
			let that = this;
			let list = that.data.noticeList;
			let item = list[index];
			if (item) {
				vk.alert(item, "公告", "我知道了");
			}
		},
		copyText(data){
			vk.pubfn.setClipboardData({
				data:data,
				success:function(){
					vk.toast("复制成功");
				},
				fail:function(){
					vk.toast("复制失败");
				}
			});
		}
	},
	// 计算属性
	computed: {
		fxLvCom(){
			try {
				let lv = vk.getVuex("$user.userInfo.fx.lv");
				let level_rule = vk.getVuex('$user.mchInfo.fx.level_rule');
				let item = vk.pubfn.getListItem(level_rule, "lv", lv);
				return item.name;
			}catch(err){
				return "异常";
			}
		}
	}
};
</script>
<style lang="scss" scoped>
.app {
	min-height: 100vh;
	background-color: #efefef;
}

.header {
	width: 100%;
	height: 200rpx;
	background-color: var(--main);

	.header-main {
		display: flex;
		color: #ffffff;
		padding: 30rpx 30rpx;
		align-items: center;
	}
	.user-info {
		flex: 3;
		margin-left: 20rpx;

		.user-name {
			font-size: 36rpx;
		}
		.user-invite-code{
			font-size: 26rpx;
		}
		.user-fx-lv{
			margin-top: 10rpx;
		}
	}

	.header-share {
		flex: 2;
		text-align: right;
		display: flex;
		justify-content: flex-end;

		.header-share-btn {
			width: 180rpx;
			background-color: rgba(255, 255, 255, 0.2);
			text-align: center;
			line-height: 60rpx;
			color: #ffffff;
			border-radius: 12rpx;
		}
	}

}

.card-view {
	width: 100%;
	background-color: #ffffff;
	border-radius: 16rpx;
	margin-top: 28rpx;
	padding: 28rpx;
}

.data-view {
	margin-top: -68rpx;
	margin-top: 0rpx;
	border-radius: 0rpx 0rpx 20rpx 20rpx;
}

.grid-title-view {
	font-weight: 550;
	font-size: 30rpx;
}

.grid-text {
	font-size: 24rpx;
	margin-top: 22rpx;
	color: #8c8c8c;
}

.grid-btn-view {
	.iconBorder {
		border: 0px solid #007aff;
		width: 90rpx;
		height: 90rpx;
		display: flex;
		align-items: center;
		border-radius: 50%;
	}

	.inViewCenter {
		text-align: center;
		width: 100%;
	}
}

.grid-avatar-view {
	.index-1 {
		position: relative;
		margin-left: -20rpx;
	}
}


.wx_shareBtn {
	//微信分享按钮对应样式
	position: absolute;
	right: 10px;
	height: 29px;
	opacity: 0.1;
	width: 90px;
}

.shareBtn {
	// 微信生成二维码按钮
}

.start-share {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: block;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: #ffffff;
	background-color: var(--main);
	letter-spacing: 6rpx;
}
.text-red{
	color: red;
	margin: 0 8rpx;
}
.text-green{
	color: #19be6b;
	margin: 0 8rpx;
	font-weight: bold;
}
.text-mt{
	margin-top: 18rpx;
}
.padding1015{
	padding: 20rpx 30rpx;
}
.share-link-popup{
	padding: 30rpx;
	.popup-title{
		font-weight: bold;
		font-size: 30rpx;
		text-align: center;
	}
	.item-title{
		color: #8c8c8c;
	}
	.item-value{
		padding: 30rpx;
		background-color: #efefef;
		margin: 20rpx 0;
	}
	.popup-tips{
		color: #8c8c8c;
		view{
			margin-top: 20rpx;
		}
	}
}


.vip-card{
	margin: -50rpx 28rpx 0 28rpx;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	padding: 16rpx 40rpx;
	min-height: 80rpx;
	font-size: 24rpx;
	display: flex;
	position: relative;
	z-index: 1;
	color: #c6b181;
	background-color: #000000;
	background-image: linear-gradient(to right, #3a3a3a, #000000);
	.vip-card-flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex: 1;
		.vip-text{
			display: flex;
			align-items: center;
		}
	}
	.get-vip{
		color: #ff6a6c;
		border: 2rpx solid #ff6a6c;
		padding: 6rpx 20rpx;
		border-radius: 50rpx;
	}
}
</style>
